<template>
    <div class="container">
        <div style="display: flex">
            <el-form
                :model="form"
                label-width="120px"
                style="margin-right: 20px"
            >
                <el-form-item label="存储目录">
                    <el-input
                        v-model.trim="form.path"
                        placeholder="例如: img/"
                        style="width: 240px"
                    />
                </el-form-item>
            </el-form>
            <el-upload
                action=""
                v-model:file-list="fileList"
                ref="upload"
                :limit="limit"
                :on-exceed="handleExceed"
                :auto-upload="true"
                :show-file-list="false"
                :before-upload="handleBeforeUpload"
                :http-request="onSubmit"
                multiple
                list-type="text"
                style="width: 600px"
            >
                <template #trigger>
                    <el-button type="primary">选择文件</el-button>
                </template>
                <template #tip>
                    <div
                        style="
                            height: 20px;
                            font-size: 12px;
                            line-height: 16px;
                            color: gray;
                        "
                    >
                        <span>同时上传最大数量 50 张；</span>
                        <span>单张图片大小不能超过 4mb；</span>
                        <span>上传图片只能是 JPEG/JPG/PNG 格式</span>
                    </div>
                </template>
            </el-upload>
        </div>

        <div class="my-upload-list" style="overflow: auto; margin-top: 20px">
            <div v-for="(item, index) in list" style="margin-bottom: 10px">
                <div
                    style="
                        font-size: 12px;
                        padding: 4px;
                        border: 1px dotted gray;
                        display: flex;
                        justify-content: space-between;
                    "
                >
                    <p
                        style="
                            width: 70%;
                            height: 20px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            line-height: 20px;
                            color: green;
                        "
                    >
                        <el-icon><Document /></el-icon>
                        {{ item.url }}
                        <span v-if="item.size != ''">{{
                            "(" + item.size + ")"
                        }}</span>
                    </p>
                    <p>
                        <el-link type="danger">删除</el-link>&nbsp;
                        <el-link type="primary">预览</el-link>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Client from "@/utils/oss"
import { defineComponent, ref } from "vue"
import dayjs from "dayjs"
import { ElMessage } from "element-plus"

export default defineComponent({
    name: "oss",
    setup() {
        const form = ref({
            path: "", //拼接在文件名前的路径，作为文件存储的位置，例如：img/
        })
        const fileList = ref([])
        let limit = ref(50)
        let loadProgress = ref(0) // 进度条的百分数
        let progressFlag = ref(false) // 是否展示进度条
        let list = ref([]) // 上传成功后返回的文件数据，交给后台保存

        // 限制图片上传的大小或格式
        function handleBeforeUpload(file) {}

        function onSubmit({ file }) {
            list.value = []
            let j = file.name.split(".")
            // 自定义唯一的文件名
            // 打印出来的uid其实就是时间戳
            let fileName =
                `${form.value.path}` +
                dayjs().format("YYYY-MM-DD_HH:mm:ss") +
                `_${file.uid}` +
                `.${j[j.length - 1]}`

            // put方法直接上传
            Client()
                .put(fileName, file)
                .then((res) => {
                    if (res.res.statusCode === 200) {
                        console.log("返回的地址", res.url)
                        ElMessage.success("上传成功")
                    } else {
                        ElMessage.error("上传失败")
                    }
                })
        }
        // 上传的图片数量超过预定值的处理函数
        function handleExceed() {
            ElMessage.warning(
                `同时上传的图片最大数量为${limit.value}张，您已经超过最大限制！`
            )
        }

        // 取消上传的处理函数
        function onCancel() {}

        return {
            handleBeforeUpload,
            onSubmit,
            fileList,
            handleExceed,
            limit,
            loadProgress,
            progressFlag,
            onCancel,
            form,
            list,
        }
    },
})
</script>

<style scoped lang="scss">
.my-upload-list {
    width: 500px;
    height: 300px;
    border: 2px solid #f2f2f2;
    padding: 10px;
}
</style>
